<template>
    <div style="height:100%;width:100%;" class="detail">
        <bar class="bar" @on-back="$router.back()" title="我的加油机"></bar>
        <swipeout class="detail-block">
            <swipeout-item transition-mode="follow" v-for="(item, index) in tankerList" :key="index">
                <div slot="right-menu">
                    <swipeout-button @click.native.self="$router.push('/addOli/' + index)" type="primary">补油
                    </swipeout-button>
                </div>
                <div slot="content"
                     class="youba-list vux-tap-active"
                     @click="$router.push('/myTanker/' + index)">
                    <div style="display: flex">
                        <i class="iconfont icon-jiayou1" style="color:#44b549;font-size:36px"></i>
                        <div class="detail-box-left">
                            <div>{{item.name}}</div>
                            <div class="detail-left-time">{{item.tankerId}}</div>
                        </div>
                    </div>
                    <div><span class="detail-left-time">剩余油量</span> {{item.remainFuel}}</div>
                </div>
            </swipeout-item>
        </swipeout>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'

    import {
        Bar
    } from 'muka-ui'
    import {
        Group,
        Cell,
        CellBox,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton
    } from 'vux'

    export default {
        name: 'dataCenter',
        components: {
            Group,
            Cell,
            CellBox,
            Bar,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton
        },
        created: function () {
            this.$ajax(
                'mch/myTanker',
                {},
                (content) => {
                    this.cTankerList(content)
                })
        },
        computed: mapState([
            // 映射 this.count 为 store.state.count
            VUEX_NAME.tankerList
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cTankerList // 映射 this.increment() 为 this.$store.commit('increment')
            ])
        }
    }

</script>

<style lang="less" scoped>
    .detail-left-time {
        color: #b9b9b9;
    }

</style>
